<template>
  <div class="user_right fl ml20" v-loading="isloginbs">
    <div>
      <div class="basicBody">
        <table>
          <colgroup>
            <col width="113" />
            <col width="155" />
            <col width="95" />
            <col width="135" />
            <col width="120" />
            <col width="120" />
            <col width="80" />
            <col width="80" />
          </colgroup>
          <tbody>
            <tr class="basicTr_top">
              <th>申请品牌</th>
              <th>申请商铺名称</th>
              <th>负责人</th>
              <th>负责人电话</th>
              <th>开始日期</th>
              <th>到期日期</th>
              <th>状态</th>
              <th>编辑</th>
            </tr>
          </tbody>
          <tbody>
            <tr class="basicTr_content" v-for="(item,index) in StoreList" :key="item.id">
              <td>
                <span
                  style="margin:1px"
                  v-for="(itema,indexa) in item.brands"
                  :key="indexa"
                >{{itema.name}}</span>
              </td>
              <td>{{item.name}}</td>
              <td>{{item.user_name}}</td>
              <td>{{item.phone}}</td>
              <td>{{item.created_at}}</td>
              <td>{{item.updated_at}}</td>
              <td>已缴费</td>
              <td>
                <el-link type="danger" @click="isstore_brand = true;store_id = item.id">申请品牌</el-link>
                <el-link type="primary" @click="btn_editor(index,item.id)">编辑</el-link>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <el-dialog title="基本信息" :visible.sync="dialogFormVisible">
      <div class="popup_content">
        <div class="disc">
          <span class="flx1">商铺名称:</span>
          <span class="flx3">{{name}}</span>
        </div>
        <div class="disc">
          <span class="flx1">商铺简介:</span>
          <div class="flx3">
            <el-input
            style="width:80%"
            type="textarea"
            :rows="7"
            placeholder="请输入内容"
            v-model="about"
          ></el-input>
          </div>
        </div>
        <div class="disc">
          <span  class="flx1">商铺logo:</span>
          <div class="flx3">
            <el-upload
              action
              :multiple="false"
              :limit="1"
              list-type="picture-card"
              :on-change="getFile"
              :on-remove="handleRemovea"
              :auto-upload="false"
              :class="{hidea:hideUploada}"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <div style="color:#ff0000;margin-top: 10px;font-size: 14px;">(注:图片格式为bmp,jpeg,jpg,png)提示:上传图片,图片规格为170px*150px,其他尺寸可能照成图片失真.</div>
          </div>
        </div>
        <div class="disc">
          <span class="flx1">主营产品:</span>
          <div class="flx3">
            <el-input
            style="width:80%"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="laser_level"
          ></el-input>
          </div>
        </div>
        <div class="disc">
          <span class="flx1">公司相册:</span>
          <div class="flx3">
            <el-upload
              action
              :multiple="false"
              :limit="4"
              list-type="picture-card"
              :on-change="getFiles"
              :on-remove="handleRemoves"
              :auto-upload="false"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <div class="hint">提示:请上传公司门面,办公场所,库房,生产车间等企业相关图片,格式为JPG,PNG.</div>
          </div>
        </div>
        <div class="disc">
          <span class="flx1">商铺负责人:</span>
          <div class="flx3">
            <el-input class="inp160" v-model="principal" placeholder="请输入商铺负责人"></el-input>
          </div>
        </div>
        <div class="disc">
          <span class="flx1">负责人电话:</span>
          <div class="flx3">
            <el-input class="inp160" v-model="head_phone" placeholder="请输入负责人电话"></el-input>
          </div>
        </div>
        <div class="disc">
          <span class="flx1">负责人微信:</span>
          <div class="flx3">
            <el-input class="inp160" v-model="head_wechat" placeholder="请输入负责人微信"></el-input>
          </div>
        </div>
        <div class="disc">
          <span class="flx1">负责人QQ号:</span>
          <div class="flx3" style="    display: flex">
            <el-input class="inp160" v-model="head_email" placeholder="请输入负责人QQ号"></el-input>
          <el-popover
            placement="top-start"
            title="提示"
            width="200"
            trigger="hover"
            content="QQ私聊服务需要前往开通https://shang.qq.com/v3/index.html"
          >
            <el-button slot="reference" style="border:0">
              <i style="font-size: 25px;margin-left: 10px;" class="el-icon-warning"></i>
            </el-button>
          </el-popover>
          </div>
        </div>
        <div slot="footer" class="btns">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editor_determine">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="isstore_brand" width="30%">
      <el-select v-model="value" placeholder="请选择" style="width:100%">
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isstore_brand = false">取 消</el-button>
        <el-button type="primary" @click="confirmBrand">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { ovistoreList, editorStore, associatedBrand } from "@/api/business";
import { brands } from "@/api/category";
export default {
  data() {
    return {
      dialogFormVisible: false,
      about: "",
      laser_level: "",
      hideUploada: false,
      imgLogoBase64: "",
      imgBase64: [],
      name: "",
      principal: "",
      head_phone: "",
      head_wechat: "",
      head_email: "",
      StoreList: [],
      isloginbs: true,
      store_id: "",
      isstore_brand: false,
      options: [],
      value: "",
    };
  },

  created() {
    this.getStoreList();
    this.getBrands();
  },

  methods: {
    getFile(file, fileList) {
      this.getBase64(file.raw).then((res) => {
        this.imgLogoBase64 = res;
        this.hideUploada = true;
        console.log(this.imgLogoBase64);
      });
    },
    getFiles(file, fileList) {
      this.getBase64(file.raw).then((res) => {
        this.imgBase64.push(res);
        console.log(this.imgBase64);
      });
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    handleRemovea() {
      console.log("点击了删除");
      this.imgLogoBase64 = "";
      this.hideUploada = false;
      console.log(this.imgLogoBase64);
    },
    handleRemoves(a, b) {
      let img64 = "";
      this.getBase64(a.raw).then((res) => {
        for (let i in this.imgBase64) {
          if (this.imgBase64[i] === res) {
            this.imgBase64.splice(i, 1);
            return;
          }
        }
      });
    },

    // 获取店铺列表
    async getStoreList() {
      const res = await ovistoreList();
      this.StoreList = res;
      this.isloginbs = false;
    },

    // 编辑
    btn_editor(index, id) {
      console.log(this.StoreList[index]);
      this.dialogFormVisible = true;
      this.name = this.StoreList[index].name;
      this.principal = this.StoreList[index].user_name;
      this.head_phone = this.StoreList[index].phone;
      this.head_email = this.StoreList[index].email;
      this.head_wechat = this.StoreList[index].wechat;
      this.laser_level = this.StoreList[index].product_introduction;
      this.about = this.StoreList[index].introduction;
      this.store_id = id;
    },

    // 弹窗确定
    async editor_determine() {
      this.dialogFormVisible = false;
      let data = {
        name: this.name,
        user_name: this.principal,
        phone: this.head_phone,
        logo_base64: this.imgLogoBase64,
        images_base64: this.imgBase64,
        introduction: this.about,
        product_introduction: this.laser_level,
        wechat: this.head_wechat,
        email: this.head_email,
      };
      await editorStore(this.store_id, data).then(e => {
        this.$message({message:'店铺编辑成功',type:'success'})
      });
    },

    // 确认品牌
    async confirmBrand() {
      let data = {
        brand_id: this.value,
      };
      await associatedBrand(this.store_id, data).then((e) =>
        this.$message({ message: "品牌申请成功等待审核", type: "success" })
      );
    },

    // 获取品牌
    async getBrands() {
      this.options = await brands();
    },
  },
};
</script>

<style lang="scss">
.hidea .el-upload--picture-card {
  display: none;
}
.user_right {
  padding-bottom: 50px;
}
.popup_content {
  font-size: 16px;
  > div {
    display: flex;
    margin-bottom: 40px;
    font-weight: 500;
    > span {
      &:nth-child(1) {
        width: 215px;
        text-align: right;
        padding-right: 30px;
      }
    }
    &:nth-child(12),
    &:nth-child(13),
    &:nth-child(14),
    &:nth-child(15) {
      display: flex;
      align-items: center;
    }
    &:nth-child(3) {
      display: flex;
      > div {
        &:nth-child(3) {
          width: 300px;
          margin-left: 30px;
          line-height: 30px;
          color: #ff0000;
        }
      }
    }
  }
}
.inp160 {
  width: 160px;
  .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
}
.inp210 {
  width: 210px;
  .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
}
.hint {
  margin-top: 10px;
  font-size: 14px;
  color: #ff0000;
}
.el-dialog__header {
  text-align: center;
  .el-dialog__title {
    font-size: 24px;
    color: #666666;
  }
}
.basicTr_top {
  height: 50px;
  background: #e5e5e5;
  width: 912px;
}
.basicTr_content {
  height: 40px;
  border-bottom: 2px dashed #e5e5e5;
  td {
    text-align: center;
  }
}
.basicBody {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
}
.btns {
  display: flex;
  justify-content: center;
}
.disc {
  display: flex;
  align-content: center;
}
.flx1{
  flex: 1;
}
.flx3{
  flex:3
}

</style>